import React, {useEffect, useState} from 'react';
import {Progress, Pagination} from 'antd';
import {parsePercent, numberHandle} from '~/utils/number';
import CommonCard from '~/page/FineBi/common/CommonCard';
import {queryValues} from '~/service/refundReport';
import DrilingTable from '~/page/FineBi/common/DrilingTable';
import {CODE_7001} from '~/service/http';
import {getColumnValue} from '../utils';

import {hidenColumnsConfigGeneral} from '../config';
import '../index.less';

const COMMON_KEY = 1;

function BarItem(props) {
    const {dimensionAndValues, dId, unitId, userRoundValue} = props;
    const [loading, setLoading] = useState(false);
    const [title, setTitle] = useState();
    const [dataSource, setDataSource] = useState([]);
    const [excelDrilingList, setExcelDrilingList] = useState([]);
    const [total, setTotal] = useState();
    const [pageNum, setPageNum] = useState(1);
    const [pageSize, setPageSize] = useState(20);


    useEffect(() => {
        const dashBoard = [
            {
                dashBoardName: dId,
                dashBoardId: dId
            }
        ];
        const hiddenColumns = userRoundValue === 1
            ? hidenColumnsConfigGeneral.map(([fieldId, fieldType]) => ({
                fieldId,
                fieldType
            }))
            : [];
        const param = {
            dimensionAndValues,
            dashBoardList: dashBoard,
            excelDrilingList,
            pager: {
                pageNum,
                pageSize
            },
            hiddenColumns
        };
        setLoading(true);
        queryValues(param)
            .then(res => {
                const cardDetail = res?.data?.[dId] || {};
                const dataRes = cardDetail[unitId] || {};
                const {unitName} = dataRes || {};

                const newColumns = dataRes?.columns?.map((item, index) => ({
                    customRender: value => getColumnValue(value, item.text),
                    props: {
                        className: 'table-col',
                        fixed: index < 4 && 'left',
                        width: index === 1 ? 130 : 100
                    },
                    ...item
                }));

                dataRes.columns = newColumns;
                setTitle(unitName);
                setDataSource(dataRes || {});
                setTotal(res?.pager?.count);
            })
            .finally(code => {
                // 后端限流，啥也不操作
                if (code === CODE_7001) {
                    // return;
                }

                setLoading(false);
            });
    }, [excelDrilingList, pageNum]);

    useEffect(() => {
        setPageNum(1);
        setExcelDrilingList([]);
    }, [dimensionAndValues]);

    const handleUpdateData = params => {
        const {drilingList, record, index, column, values, handleType} = params;
        let newExcelDrilingList = [];
        if (handleType === 'close') {
            newExcelDrilingList = excelDrilingList.concat([drilingList]);
        }
        else {
            newExcelDrilingList = excelDrilingList.filter(item => item.every(child => child.value !== record[column]));
        }
        setExcelDrilingList(newExcelDrilingList);
    };

    const pagerChange = (page, pageSize) => {
        setPageNum(page);
    };

    return (
        <CommonCard
            title={title}
            // style={{height: '100%'}}
            span={24}
            loading={loading}
            // height={600}
            content={(
                // <CommonEchart
                //     {...props}
                //     id={partKey}
                //     extendEchartsOptions={extendOptions(dataSource?.chart)}
                //     dataSource={dataSource}
                // />
                <>
                    <DrilingTable
                        dataSource={dataSource}
                        onUdateData={handleUpdateData}
                        tableProps={{scroll: {y: 600}}}
                    />
                    <Pagination
                        className="dtPager"
                        size="small"
                        total={total}
                        current={pageNum}
                        defaultPageSize={pageSize}
                        onChange={pagerChange}
                        showSizeChanger={false}
                    />
                </>
            )}
        />
    );
}

export default BarItem;

